<template>
	<view class="comment">
		<!-- 评论 -->
		<view class="comment-item" v-for="item in 5">
			<view class="av">
				<view class="av-l">
					<image src="" mode=""></image>
					<text>de*</text>
				</view>
				<view class="av-r">2018-12-15 15:32</view>
			</view>
			<view class="grade">
				<view class="grade-l">规格：常规</view>
				<view class="grade-r">口碑好评</view>
			</view>
			<view class="cont">
				这次这个洗衣液秒杀，秒到了很开心。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	.comment {
		font-size: 26upx;
		width: 100%;
		min-height: 100%;
		position: absolute;
		background-color: #f3f3f3;
	}
	.comment-item {
		background-color: #fff;
		margin-bottom: 20upx;
		padding: 0 20upx;
	}
	.comment-item .av {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		padding-top: 10upx;
	}
	.comment-item .av-l {
		flex: 1;
		overflow: hidden;
	}
	
	.comment-item .av-l image {
		width: 55upx;
		height: 55upx;
		background-color: #A2A2A2;
		border-radius: 100%;
		vertical-align: center;
		float: left;
		margin-top: 12upx;
		margin-right: 20upx;
	}
	.comment-item  .av-r {
		width: 250upx;
		color: #999;
		text-align: right;
	}
	.comment-item .grade {
		height: 80upx;
		line-height: 80upx;
		display: flex;
	}
	.comment-item .grade-l {
		width: 150upx;
		color: #666;
		font-size: 22upx;
	}
	.comment-item .grade-r {
		color: #F52A4C;
		font-size: 26upx;
		flex: 1;
		text-align: right;
	}
	.comment-item .cont {
		min-height: 100upx;
		color: #666;
	}
</style>
